<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐</title>
  <link rel="stylesheet" href="music.css">
</head>
<body>
  <header>
    <div class="header-inner">
      <img src="imgs\qqmusic.png" alt="QQ音乐">
    </div>
  </header>

  <main>
    <!-- 歌单推荐部分 -->
    <section class="playlist-recommend">
      <h2>歌单推荐</h2>
      <div class="tag-list">
        <a href="#" class="tag-item">为你推荐</a>
        <a href="#" class="tag-item">运动</a>
        <a href="#" class="tag-item">网络歌曲</a>
        <a href="#" class="tag-item">思恋</a>
        <a href="#" class="tag-item">官方歌单</a>
        <a href="#" class="tag-item">情歌</a>
      </div>
      <div class="playlist">
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844024071.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">翻唱集合（六）</div>
          <div class="album-author">精选歌单</div>
          <div class="album-time">894.4万</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844029325.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">向风而行</div>
          <div class="album-author">精选歌单</div>
          <div class="album-time">11.2万</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844032639.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">想和你一</div>
          <div class="album-author">精选歌单</div>
          <div class="album-time">15.3万</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844037816.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">疗愈</div>
          <div class="album-author">精选歌单</div>
          <div class="album-time">12.9万</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844263405.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">电音背景乐</div>
          <div class="album-author">精选歌单</div>
          <div class="album-time">30.2万</div>
        </div>
      </div>
    </section>

    <!-- 新歌首发部分 -->
    <section class="new-songs">
      <h2>新歌首发</h2>
      <div class="tag-list">
        <a href="#" class="tag-item">推荐</a>
        <a href="#" class="tag-item">内地</a>
        <a href="#" class="tag-item">港台</a>
        <a href="#" class="tag-item">欧美</a>
        <a href="#" class="tag-item">韩国</a>
        <a href="#" class="tag-item">日本</a>
      </div>
      <div class="song-list">
        <div class="song-item">
          <img src="imgs\1759844267787.png" class="song-img">
          <div class="song-info">
            <div class="song-title">Subooge</div>
            <div class="song-singer">Ride Rinch</div>
          </div>
          <div class="song-time">03:28</div>
        </div>
        <div class="song-item">
          <img src="imgs\1759844270518.png" class="song-img">
          <div class="song-info">
            <div class="song-title">过客</div>
            <div class="song-singer">邓宇章</div>
          </div>
          <div class="song-time">04:17</div>
        </div>
        <div class="song-item">
          <img src="imgs\1759844270518.png" class="song-img">
          <div class="song-info">
            <div class="song-title">2月升温</div>
            <div class="song-singer">满舒克</div>
          </div>
          <div class="song-time">03:24</div>
        </div>
        <div class="song-item">
          <img src="imgs\1759844273801.png" class="song-img">
          <div class="song-info">
            <div class="song-title">北慕雪人</div>
            <div class="song-singer">宝藏音乐</div>
          </div>
          <div class="song-time">03:46</div>
        </div>
        <div class="song-item">
          <img src="imgs\1759844024071.png" class="song-img">
          <div class="song-info">
            <div class="song-title">一起热爱</div>
            <div class="song-singer">蒲熠星/石凯等</div>
          </div>
          <div class="song-time">03:55</div>
        </div>
        <div class="song-item">
          <img src="imgs\1759844029325.png" class="song-img">
          <div class="song-info">
            <div class="song-title">Kompongsom</div>
            <div class="song-singer">ONE OK ROCK</div>
          </div>
          <div class="song-time">03:44</div>
        </div>
        <div class="song-item">
          <img src="imgs\1759844263405.png" class="song-img">
          <div class="song-info">
            <div class="song-title">小风车不停在</div>
            <div class="song-singer">TF家族</div>
          </div>
          <div class="song-time">04:20</div>
        </div>
        <div class="song-item">
          <img src="imgs\1759844024071.png" class="song-img">
          <div class="song-info">
            <div class="song-title">向夜晚奔去的人</div>
            <div class="song-singer">麻园诗人</div>
          </div>
          <div class="song-time">04:00</div>
        </div>
        <div class="song-item">
          <img src="imgs\1759844029325.png" class="song-img">
          <div class="song-info">
            <div class="song-title">驯化者</div>
            <div class="song-singer">周深 / 范世錡</div>
          </div>
          <div class="song-time">03:29</div>
        </div>
      </div>
    </section>

    <!-- MV部分 -->
    <section class="mv-section">
      <h2>MV</h2>
      <div class="tag-list">
        <a href="#" class="tag-item">精选</a>
        <a href="#" class="tag-item">内地</a>
        <a href="#" class="tag-item">韩国</a>
        <a href="#" class="tag-item">港台</a>
        <a href="#" class="tag-item">欧美</a>
        <a href="#" class="tag-item">日本</a>
      </div>
      <div class="playlist">
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844263405.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">向夜晚奔去的人</div>
          <div class="album-time">04:02</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844270518.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">雨</div>
          <div class="album-time">03:34</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844270518.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">一起热爱</div>
          <div class="album-time">04:28</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844270518.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">向风而行</div>
          <div class="album-time">03:05</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844270518.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">追光的你</div>
          <div class="album-time">03:48</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844270518.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">What's wrong with me</div>
          <div class="album-time">03:05</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844270518.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">Let's Party</div>
          <div class="album-time">04:59</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844270518.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">散步时间</div>
          <div class="album-time">03:46</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844024071.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">斗琴高手</div>
          <div class="album-time">03:55</div>
        </div>
        <div class="album">
          <a href="#" class="cover-wrap">
            <img src="imgs\1759844024071.png" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" class="cover-play">
          </a>
          <div class="album-title">重逢</div>
          <div class="album-time">03:05</div>
        </div>
      </div>
    </section>
  </main>
  <footer></footer>
</body>
</html>